<template>
  <div style="margin-bottom:100px;width: 95%;">
    <div class="home">
      <!-- 四个圆饼 -->
      <!-- <div class="home_item" v-for="(item,index) in data.dataEcharts" :key="index">
        <div class="home_item_head">
          <p class="Subhead">
            <svg class="svgIcon" aria-hidden="true">
               <use :href="item.iconfont" />
            </svg>
            {{item.title}}({{item.name}})
          </p>
        </div>
        <div>
          <PriEchart :color="item.color" :id='item.id' :title='item.title' :bar='item.channelBar' :data='item.channelData' />
        </div>
      </div> -->
      <!-- 专利监测预警 -->
      <!-- <div class="home_item">
        <div class="home_item_head">
          <div class="Subhead">
            <div class="flex">
              <p>
                <svg class="svgIcon" aria-hidden="true">
                  <use href="#icon-zhuangtaiyujing" />
                </svg>
                <span class="yj" style="vertical-align: text-bottom; display: inline-block;">专利检测预警</span>
              </p>
              <p>
                <span class="testing" v-if="data.warn">({{ data.warn.start_time }} - {{ data.warn.end_time }})</span>
              </p>
            </div>
          </div>
        </div>
        <div class="Early" v-if="data.warn">
          <div class="Early_item">
            <router-link to="/patent" tag="div" class="link_div">
              <div class="early_num" :class="data.warn.my > 0 ? '' : 'Unchecked'">{{ data.warn.my }}</div>
              <div class="last_info">
                <p class="early_patent context">我的专利</p>
                <p class="early_patent_info" v-if="data.warn.my > 0">有{{ data.warn.my }}条专利有变动，立即查看</p>
                <p class="Notyet" v-else>暂无更新数据</p>
              </div>
            </router-link>
          </div>
          <div class="Early_item">
            <router-link to="/patent?name=competitor" tag="div" class="link_div">
              <div class="early_num" :class="data.warn.rivals > 0 ? '' : 'Unchecked'">{{ data.warn.rivals }}</div>
              <div class="last_info">
                <p class="early_patent context">竞争对手</p>
                <p class="early_patent_info" v-if="data.warn.rivals > 0">有{{ data.warn.rivals }}条专利有变动，立即查看</p>
                <p class="Notyet" v-else>暂无更新数据</p>
              </div>
            </router-link>
          </div>
          <div class="Early_item">
            <router-link to="/patent?name=Research" tag="div" class="link_div">
              <div class="early_num" :class="data.warn.college > 0 ? '' : 'Unchecked'">{{ data.warn.college }}</div>
              <div class="last_info">
                <p class="early_patent context">产学研情报</p>
                <p class="early_patent_info" v-if="data.warn.college > 0">有{{ data.warn.college }}条专利有变动，立即查看</p>
                <p class="Notyet" v-else>暂无更新数据</p>
              </div>
            </router-link>
          </div>
        </div>
      </div> -->

      <el-row style="width:100%;margin: 0;" :gutter="28">
        <el-col :span="8">
          <div class="home_item">
            <div class="home_item_head">
              <div class="Subhead">
                <div class="flex">
                  <p>
                    <span class="iconfont icon-zhaozhuanli1" style="color: #e8a767;"></span>
                    <span class="yj" style="display: inline-block;">累计授权专利量统计</span>
                  </p>
                  <p>
                    <!-- <span class="testing">(04.03 - 04.09)</span> -->
                  </p>
                </div>
              </div>
            </div>
            <div class="Early">
              <div style="height: 258px;">
                <div style="height:100%;width: 100%;" id="addHistogram"></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="home_item">
            <div class="home_item_head">
              <div class="Subhead">
                <div class="flex">
                  <p>
                    <svg-icon icon-class="falv" class="svgIcon" />
                    <span class="yj" style="vertical-align: text-top; display: inline-block;">新增专利法律状态</span>
                  </p>
                  <p>
                    <!-- <span class="testing">(04.03 - 04.09)</span> -->
                  </p>
                </div>
              </div>
            </div>
            <div class="Early">
              <div style="height: 258px;">
                <div style="height:100%;width: 100%;" id="addHistogram2"></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="home_item">
            <div class="home_item_head">
              <div class="Subhead">
                <div class="flex">
                  <p>
                    <svg class="svgIcon" aria-hidden="true">
                      <use href="#icon-zhuangtaiyujing" />
                    </svg>
                    <span class="yj" style="vertical-align: text-top; display: inline-block;">专利检测预警</span>
                  </p>
                  <p>
                    <span class="testing" v-if="data.warn">({{ data.warn.start_time }} - {{ data.warn.end_time }})</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="Early" v-if="data.warn">
              <div class="Early_item">
                <router-link to="/patent" tag="div" class="link_div">
                  <div class="early_num" :class="data.warn.my > 0 ? '' : 'Unchecked'">{{ data.warn.my }}</div>
                  <div class="last_info">
                    <p class="early_patent context">我的专利</p>
                    <p class="early_patent_info" v-if="data.warn.my > 0">有{{ data.warn.my }}条专利有变动，立即查看</p>
                    <p class="Notyet" v-else>暂无更新数据</p>
                  </div>
                </router-link>
              </div>
              <div class="Early_item">
                <router-link to="/patent?name=competitor" tag="div" class="link_div">
                  <div class="early_num" :class="data.warn.rivals > 0 ? '' : 'Unchecked'">{{ data.warn.rivals }}</div>
                  <div class="last_info">
                    <p class="early_patent context">竞争对手</p>
                    <p class="early_patent_info" v-if="data.warn.rivals > 0">有{{ data.warn.rivals }}条专利有变动，立即查看</p>
                    <p class="Notyet" v-else>暂无更新数据</p>
                  </div>
                </router-link>
              </div>
              <div class="Early_item">
                <router-link to="/patent?name=Research" tag="div" class="link_div">
                  <div class="early_num" :class="data.warn.college > 0 ? '' : 'Unchecked'">{{ data.warn.college }}</div>
                  <div class="last_info">
                    <p class="early_patent context">产学研情报</p>
                    <p class="early_patent_info" v-if="data.warn.college > 0">有{{ data.warn.college }}条专利有变动，立即查看</p>
                    <p class="Notyet" v-else>暂无更新数据</p>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="comprehensive">
      <el-row style="width: 100%;margin: 0;" :gutter="28">
        <el-col :span="16">
          <div class="comprehensive_item">
            <div class="Message">
              <div class="home_item_head" style="border-bottom: 0px">
                <p class="Subhead">近10年变化趋势</p>
                <p class="Subhead">
                  <!-- <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select> -->
                </p>
              </div>
              <div class="mess_box">
                <el-row style="height: 323px;">
                  <el-col :span="4" style="height: 100%;">
                    <div class="LineBox">
                      <!-- <div class="typeLine menu_active">发明公开专利分布</div>
                      <div class="typeLine">发明授权专利分布</div>
                      <div class="typeLine">新型专利分布</div>
                      <div class="typeLine">外观专利分布</div>
                      <div class="typeLine">专利总量分布</div> -->
                      <div class="typeLine" :class="item == LineTypeName ? 'menu_active' : ''" v-for="item in LineType"
                        :key="item" @click="LineTypes(item)">{{ item }}</div>
                    </div>
                  </el-col>
                  <el-col :span="20" style="height: 100%;">
                    <div style="height: 100%;">
                      <div style="height:100%;width: 100%;" id="Line"></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="comprehensive_item">
            <div class="Message">
              <div class="home_item_head">
                <p class="Subhead">消息盒</p>
                <p class="Subhead "><router-link to="/center" style="font-size:14px;">全部 ></router-link></p>
              </div>
              <div class="mess_box">
                <div class="Message_item" v-for="(item, index) in data.message" :key="index"
                  @click="goCenterDeatil(item.id)">
                  <div>
                    <p class="context el-ellipsis2"><el-tag v-if="item.tag" size="small" effect="dark"
                        style="margin-right:5px;" type="danger">{{ item.tag }}</el-tag>{{ item.title }}</p>
                    <p class="time">发布时间：{{ item.ctime }}</p>
                  </div>
                  <!-- <el-button class="pubBtn" type="button">有{{ item.reply }}条回复</el-button> -->
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>


      <!-- <div class="comprehensive_item">
        <div class="annularChart" id="echart"></div>
      </div>
      <div class="comprehensive_item">
        <Shape :item="data.ipc_data" />
      </div>
      <div class="comprehensive_item">
        <div class="Message">
          <div class="home_item_head">
            <p class="Subhead">消息盒</p>
            <p class="Subhead "><router-link to="/center" style="font-size:14px;">全部 ></router-link></p>
          </div>
          <div class="mess_box">
            <div class="Message_item" v-for="(item, index) in data.message" :key="index" @click="goCenterDeatil(item.id)">
              <div>
                <p class="context el-ellipsis2"><el-tag v-if="item.tag" size="small" effect="dark"
                    style="margin-right:5px;" type="danger">{{ item.tag }}</el-tag>{{ item.title }}</p>
                <p class="time">发布时间：{{ item.ctime }}</p>
              </div>
              <el-button class="pubBtn" type="button">有{{ item.reply }}条回复</el-button>
            </div>
          </div>
        </div>
      </div> -->


    </div>
    <el-dialog title="您还是试用用户" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>请在14个工作日内在个人中心完成认证哦~</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goCenter">立即认证</el-button>
      </span>
    </el-dialog>
    <Service />
  </div>
</template>

<script>
import {
  mapGetters,
  mapState
} from 'vuex'
import { homeIndex, get_chart, get_ten_chart } from "@/api"
import PriEchart from '@/components/PriEchart'
import Service from '@/components/Service'
import Shape from '@/components/Shape'
import * as echarts from 'echarts'
export default {
  components: {
    PriEchart,
    Shape,
    Service
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      options: [],
      value: '',
      chartList: {},
      dimensionsHistogram: ['product'],
      seriesHistogram: [],
      LineList: {},
      LineType: { 'open': '发明公开专利分布', 'auth': '发明授权专利分布', 'news': '新型专利分布', 'apper': '外观专利分布', 'num': '专利总量分布' },
      LineTypeName: '发明公开专利分布',
      LinemyChart: null,
      chartDom: null,
      chartDom2: null,
    }
  },
  computed: {
    ...mapGetters([
      'type'
    ]),
    // ...mapState(['seach'])
  },
  async mounted() {
    this.LinemyChart = echarts.init(document.getElementById('Line'));


    this.chartDom = echarts.init(document.getElementById('addHistogram'));
    this.chartDom2 = echarts.init(document.getElementById('addHistogram2'));


    if (sessionStorage.getItem("show") == null || sessionStorage.getItem("show") == '') {
      if (this.type == '1') {
        this.dialogVisible = true
      }
    }
    this.data = await homeIndex();
    // this.$nextTick(() => {
    //   this.getAnnular();
    // })
    get_chart({
      user_id: this.$store.state.user.id
    }).then(res => {
      this.chartList = res
      res.dimensions.map(res => {
        if (res != 'product') {
          this.seriesHistogram.push({ type: 'bar' })
        }
      })
      let source1 = res.source.slice(0, 4)
      let source2 = res.source.slice(4)
      this.Histogram(1, source1);
      this.Histogram(2, source2);
    })

    get_ten_chart({
      user_id: this.$store.state.user.id
    }).then(res => {
      // console.log(res);
      this.LineList = res

      let series = []
      let legend = []
      res.series.map(res => {
        series.push({
          name: res.name,
          type: 'line',
          data: res.open
        })
        legend.push(res.name)
      })
      this.Line(series, legend);
    })
  },
  methods: {
    LineTypes(item) {
      this.LineTypeName = item

      // console.log(item);
      let data = 'open'
      for (let i in this.LineType) {
        // console.log(i);
        if (this.LineType[i] == item) {
          data = i
        }
      }
      let series = []
      let legend = []
      this.LineList.series.map(res => {
        series.push({
          name: res.name,
          type: 'line',
          data: res[data]
        })
        legend.push(res.name)
      })
      this.Line(series, legend);
    },
    Line(series, legend) {
      // console.log(this.LinemyChart,'this.LinemyChart');
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legend,
          top: 'bottom',
          type: 'scroll',
        },
        grid: { // 让图表占满容器
          top: "20px",
          left: "60px",
          right: "30px",
          bottom: "60px"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.LineList.date // x轴数据年份
        },
        yAxis: {
          type: 'value'
        },
        series: series
        // series: [
        //   {
        //     name: '公司1',
        //     type: 'line',//折线图
        //     stack: 'Total',
        //     data: [120, 132, 101, 134, 90, 230, 210]
        //   }
        // ]
      };
      this.LinemyChart.setOption(option);
      window.addEventListener("resize", () => {
        this.LinemyChart.resize();
      })

    },
    Histogram(chartDom, source) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          top: 'bottom',
          itemHeight: 8,
          itemWidth: 8,
          type: 'scroll',
        },
        grid: { // 让图表占满容器
          top: "10px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        dataset: {
          dimensions: this.chartList.dimensions,
          source: source
        },
        xAxis: { type: 'category' },
        yAxis: {
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: this.seriesHistogram
      };

      if (chartDom == 1) {
        this.chartDom.setOption(option);
        window.addEventListener("resize", () => {
          this.chartDom.resize();
        })

      } else {
        this.chartDom2.setOption(option);

        window.addEventListener("resize", () => {
          this.chartDom2.resize();
        })
      }

    },

    getAnnular() {
      let than = this;
      let charts = echarts.init(document.getElementById(`echart`));
      charts.setOption({
        title: {
          left: 10,
          top: 20,
          text: '专利授权趋势',
          textStyle: {
            color: "#1f2e4c",
            fontSize: "17",
            fontWeight: 400
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              // backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 5,
          // data: ['今年', '去年']
        },
        // toolbox: { /下载图片
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: than.data.year_ad
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          // name: '去年',
          type: 'line',
          stack: '总量',
          legendHoverLink: true,
          hoverAnimation: true,
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: { //折线和折线点 颜色
            normal: {
              show: true,
              position: 'top',
              color: '#F05C6C',
              lineStyle: {
                color: '#F05C6C'
              }
            }
          },
          // label: {
          //     normal: {
          //         show: true,
          //         position: 'top'
          //     }
          // },
          data: than.data.year_ad_data
        },
          // {
          //   name: '今年',
          //   type: 'line',
          //   stack: '总量',
          //   legendHoverLink: true,
          //   hoverAnimation: true,
          //   symbol: 'circle', //折线点设置为实心点
          //   symbolSize: 8, //折线点的大小
          //   itemStyle: { //折线和折线点 颜色
          //     normal: {
          //       show: true,
          //       position: 'top',
          //       color: '#1677FF',
          //       lineStyle: {
          //         color: '#1677FF'
          //       }
          //     }
          //   },
          //   // label: {
          //   //     normal: {
          //   //         show: true,
          //   //         position: 'top'
          //   //     }
          //   // },
          //   data: [213, 808, 502, 602, 702, 802, 908, 934, 1290, 1330, 932, 901],
          // },
        ]
      })
    },
    handleClose() {
      this.dialogVisible = false
      sessionStorage.setItem("show", '1')
    },
    goCenterDeatil(id) {
      this.$router.push({ path: "/centerDetail", query: { id: id } })
    },
    goCenter() {
      sessionStorage.setItem("show", '1')
      this.$router.push("/userCenter")
    }
  },
}
</script>

<style scoped lang="less">
.home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 33px 0px;

  .home_item {
    // width: 330px;
    // height:320px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    // margin-right: 18px;
    // overflow: hidden;

    .home_item_head {
      border-bottom: 1px solid #D6D6D6;
      margin: 0 17px;

      .Subhead {
        display: flex;
        align-items: center;
        align-content: center;
        // margin: 20px 0;
        padding: 20px 0;

        .flex {
          width: 100%;
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: space-between;
        }

        .iconfont {
          margin-right: 8px;
          font-size: 19px;
        }
      }

      .testing {
        font-size: 14px;
      }
    }
  }

  .Early {
    // height: 283px;
    padding: 20px 15px;

  }

  .Early_item {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    // margin: 20px 15px;
    margin-bottom: 20px;

    .early_num {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      border: 6px solid #EA6868;
      background-color: #ffffff;
      text-align: center;
      line-height: 2;
      font-size: 25px;
      font-weight: 400;
      color: #EA6868;
    }

    .Unchecked {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background-color: #ffffff;
      text-align: center;
      line-height: 2;
      font-size: 25px;
      font-weight: 400;
      color: #c7c7c7;
      border: 6px solid #c7c7c7 !important;
    }

    .Notyet {
      font-size: 14px;
      font-weight: 400;
      color: #8F9BB3;
      margin-top: 15px;
    }

    .early_patent_info {
      width: 200px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(234, 104, 104, 1);
      margin-top: 15px;
    }

    .last_info {
      margin-left: 23px;
    }
  }
}

.comprehensive {
  display: flex;
  // margin: 0 15px;
  // justify-content: space-between;

  .comprehensive_item {
    // margin-right: 28px;
    // width: 30%;

    .home_item_head {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #D6D6D6;
      margin: 0 17px;

      .Subhead {
        padding: 20px 0;

        .iconfont {
          margin-right: 8px;
          font-size: 19px;
        }
      }

      .Subhead2 {
        padding: 10px 0;

        .iconfont {
          margin-right: 8px;
          font-size: 19px;
        }
      }
    }
  }

  #echart {
    width: 100%;
    height: 395px;
    background-color: #fff;
  }
}

.Message {
  width: 100%;
  height: 395px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
}

.mess_box {
  margin: 0 15px;

  .LineBox {
    color: #303133;
    font-size: 15px;

    .typeLine {
      padding: 0 0 0 15px;
      height: 50px;
      line-height: 50px;
      border-right: 3px solid #ffffff;
      cursor: pointer;
      //一行显示不下，自动换行
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;

      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;

    }

    .typeLine:hover {
      transition: all 0.3s;
      background-color: #ecf5ff;
      border-right: 3px solid #37f;
    }

    .menu_active {
      border-right: 3px solid #37f;
      background-color: #ecf5ff;
    }
  }

  .Message_item {
    padding: 13px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #D5D5D5;
  }

  .Message_item:last-child {
    border-bottom: none;
  }

  .context {
    // width: 238px;
  }

  .time {
    font-size: 14px;
    color: #999;
    margin: 5px 0;

  }
}

.svgIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

@media (max-width:1800px) {
  .home {
    flex-wrap: wrap;
    justify-content: flex-start;

    .home_item {
      margin-bottom: 20px;
    }
  }

  .comprehensive {
    flex-wrap: wrap;
    justify-content: flex-start;

    .comprehensive_item {
      margin-bottom: 20px;
    }

    #echart,
    .Message {
      width: 100%;
      height: 395px;
      background-color: #fff;
    }
  }
}

@media (max-width:1680px) {
  .home {
    flex-wrap: wrap;
    justify-content: flex-start;

    .home_item {
      margin-bottom: 20px;
      // width: 20%;
    }
  }

  .comprehensive {
    flex-wrap: wrap;
    justify-content: space-between;

    .comprehensive_item {
      margin-bottom: 20px;
    }

    #echart,
    .Message {
      width: 100%;
      height: 395px;
      background-color: #fff;
    }
  }

  .home_item {
    // width: 240px !important;
  }

  .yj {
    // display: none !important;
    font-size: 13px;
    position: relative;
    top: -2px;
    left: -8px;
  }

  .flex {
    flex-wrap: wrap;
  }
}

.link_div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width:1440px) {
.mess_box {
  .Message_item {
    flex-wrap: wrap;
  }
}

  .home_item {
    // width: 210px !important;
  }

  .testing {
    display: none !important;
  }

  .yj {
    // display: none !important;
    font-size: 16px;
  }

  .home_item_head {
    margin: 0px 10px !important;
  }

  #echart,
  .Message {
    width: 100% !important;
    height: 395px;
    background-color: #fff;
  }

  .comprehensive .comprehensive_item {
    margin-right: 10px;
  }

  .context {
    // width: 230px !important;
  }

  .last_info {
    margin-left: 15px !important;
  }

  .flex {
    flex-wrap: wrap;
  }

  .home .home_item {
    margin-right: 8px;
  }
}

@media (max-width:1366px) {
  .home_item {
    // width: 188px !important;
  }

  .last_info {
    margin-left: 10px !important;
  }

  #echart,
  .Message {
    width: 100% !important;
    height: 395px;
    background-color: #fff;
  }

  .context {
    // width: 210px !important;
  }

  .home .home_item {
    margin-right: 15px;
  }
}

@media (max-width:1366px) {
  .comprehensive {
    flex-wrap: wrap;
    justify-content: space-between;

    .comprehensive_item {
      width: auto;
      margin-bottom: 20px;
    }
  }
}

@media (max-width:1280px) {
  .home {
    flex-wrap: wrap;
    justify-content: flex-start;

    .home_item {
      // width: 30%;
      margin-bottom: 20px;

      .early_patent_info {
        width: 170px;
      }
    }
  }

  .comprehensive {
    flex-wrap: wrap;
    justify-content: flex-start;

    .comprehensive_item {
      margin-bottom: 20px;
    }

    #echart,
    .Message {
      width: 100%;
      height: 395px;
      background-color: #fff;
    }
  }
}
</style>
